<template>
  <div id="main2" style="width: 100%; height: 100%"></div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  name: 'myLine',
  data() {
    return {};
  },
  props: {
    dataSource: {
      type: Array,
      default: []
    }
  },
  watch: {
    dataSource: {
      handler(nl, ol) {
        this.initEchart();
      },
      deep: true
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initEchart();
    });
  },
  methods: {
    initEchart() {
      const xData = [];
      const yData = [];
      this.dataSource.map(item => {
        xData.push(item.year);
        yData.push(item.num);
      });
      var chartDom = document.getElementById('main2');
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        color: ['#43CF7C'],
        // 悬停tips
        tooltip: {
          // trigger: 'axis'

          trigger: 'item',
          formatter: params => {
            var color = params.color; //图例颜色
            var htmlStr = '<div>';
            htmlStr += '在建面板坝数量' + '<br/>'; //x轴的名称//为了保证和原来的效果一样，这里自己实现了一个点的效果
            htmlStr +=
              '<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:' +
              color +
              ';"></span>'; // 文本颜色设置--2020-07-23(需要设置,请解注释下面一行)
            //htmlStr += '<span style="color:'+color+'">';//添加一个汉字，这里你可以格式你的数字或者自定义文本内容
            htmlStr += params.name + '：' + '<span style="color:' + '#43CF7C' + '">' + params.value + '座' + '</span>'; // 文本颜色设置--2020-07-23(需要设置,请解注释下面一行)
            //htmlStr += '</span>';
            htmlStr += '</div>';
            return htmlStr;
          }
        },
        // 上方分页
        // legend: {
        //   data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
        // },
        // 位移
        grid: {
          left: '1%',
          right: '4%',
          bottom: '3%',
          top: '10%',
          containLabel: true
        },

        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: xData,
          axisLabel: {
            show: true,
            textStyle: {
              color: 'rgba(255, 255, 255, 0.5)'
            }
          },
          axisLine: {
            lineStyle: {
              color: 'rgba(255, 255, 255, 0.5)' //x轴轴线颜色
            }
          }
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            show: true,
            textStyle: {
              color: 'rgba(255, 255, 255, 0.5)'
            }
          },
          axisLine: {
            lineStyle: {
              color: 'rgba(255, 255, 255, 0.5)' //x轴轴线颜色
            }
          },
          minInterval: 1
        },
        series: [
          {
            name: '在建面板坝数量',
            type: 'line',
            stack: 'Total',
            data: yData,
            // lineStyle: {
            //   // 阴影部分
            //   shadowOffsetX: 0, // 折线的X偏移
            //   shadowOffsetY: 20, // 折线的Y偏移
            //   shadowBlur: 8, // 折线模糊
            //   shadowColor: 'rgba(145, 132, 132, 1)' //折线颜色
            // }
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: 'rgba(0, 186, 173, 0.3)'
                  },
                  {
                    offset: 1,
                    color: 'rgba(67, 207, 124, 0)'
                  }
                ]
              }
            }
          }
        ]
      };

      option && myChart.setOption(option);
    }
  }
};
</script>

<style></style>
